<template>
    <div >
        <Title></Title>
        <div class="box1">
<!--            我的购物车-->
            <header>
                <span>我的购物车</span>
                <span>共
                    <span>{{Number(carNum)}}</span>
                    门课程
                </span>
            </header>
<!--            全选，表头-->
            <div class="list-header">
                <a-row type="flex" justify="space-around">
                    <a-col :span="4">
                        <div>
                            <div>
                                <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
                                    全选
                                </a-checkbox>
                            </div>
                            <br />
                        </div>
<!--                        <span style="padding-left: 5px">全选</span>-->
                    </a-col>
                    <a-col :span="3">
                        课程名称
                    </a-col>
                    <a-col :span="2">
                        原价
                    </a-col>
                    <a-col :span="2">
                        优惠
                    </a-col>
                    <a-col :span="1">
                        操作
                    </a-col>
                </a-row>
            </div>
<!--            内容-->
            <div v-for="(item,index) in buyCarMsg" :key="index">
                <a-row type="flex" justify="space-around" class="buycar_content">
                    <a-col :span="4">
                        <a-checkbox :checked="checkedList.some(checkitem=>item.shoppingCartId===checkitem.shoppingCartId)" @change="onChange(item,$event)">

                        </a-checkbox>

                        <img :src=item.course.bannerFileUrl alt="" style="width: 156px;height: 100%;margin-left: 10px;">
                    </a-col>
                    <a-col :span="3">
                        {{item.course.courseTitle}}
                    </a-col>
                    <a-col :span="2">
                        <span>
                            <s>{{item.course.coursePrice}}</s>
                        </span>
                        <span style="color: #FF5500">&yen;{{item.course.discountPrice}}</span>
                    </a-col>
                    <a-col :span="2">
                        <span class="timefree">
                            {{item.course.discountDesc}}</span>
                    </a-col>
                    <a-col :span="1">
                        <a-icon type="delete" style="color: #FF5500" @click="deleteCar(item.shoppingCartId)" />
                    </a-col>
                </a-row>
            </div>
            <!--            提交-->
            <div class="buycar_put">
                <!--                全选-->
                <div>
                    <input type="checkbox">
                    <span style="padding-left: 5px">全选</span>
                </div>
<!--                合计提交-->
                <div>
                    <div>
                        <span>合计：</span>
                        <span>&yen;
<!--                            <span v-if="!sure">-->
<!--                                {{total}}-->
<!--                            </span>-->
                            <span>
                                {{Math.round(totalPrice)}}
                            </span>
                        </span>
                    </div>

                    <button style="outline: none">提交</button>
                </div>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>

<script>
    import Title from "./otherComponents/Title";
    import Footer from "./components/Footer";
    import {mapState} from 'vuex'
    import {DlelteBuyCar,buyCarMsg} from '../api/Tlmusic'
    // const plainOptions = [];
    // const defaultCheckedList = [];

    export default {
        name: "BuyCar",
        components:{
            Title,
            Footer
        },
        data() {
            return {
                checkedList: [],
                //样式控制（半选状态）
                indeterminate: false,
                // checkAll: false,
                plainOptions:[''],
                total:'0.00',
                carid:'',
                carMsg:[],
                deleteCarNum:0,
                sure:false,
                price:[],
                finalprice:0
            };
        },
        methods: {
            onChange(checkitem,e) {
                if (e.target.checked){
                    this.checkedList.push(checkitem)
                }else{
                    this.checkedList.splice(this.checkedList.findIndex(item=>item.shoppingCartId===checkitem.shoppingCartId),1)
                }
                this.indeterminate = this.checkedList.length!==0&&this.checkedList.length<this.buyCarMsg.length;
                // this.checkAll = checkedList.length === this.plainOptions.length;
                // this.sure = !this.sure
                // this.price = []
                // this.buyCarMsg.forEach((item,index) =>{
                //     this.price.push(this.buyCarMsg[index].course.discountPrice)
                // })
                // console.log(this.price)
                // this.finalprice = 0
                // for (var i=0;i<this.price.length;i++){
                //     this.finalprice += this.price[i]
                // }

            },

            onCheckAllChange(e) {
                // Object.assign(this, {
                //     checkedList: e.target.checked ? this.plainOptions : [],
                //     indeterminate: false,
                //     checkAll: e.target.checked,
                // })
                if( e.target.checked ){
                    this.checkedList=this.buyCarMsg
                }else{
                    this.checkedList=[]
                }

            },
            //删除购物车内容
            deleteCar(id){
                this.carid = id
                DlelteBuyCar(this.carid).then(
                    res=>{
                        if (res.code===0){
                            buyCarMsg().then(res=>{
                                console.log('准备删除')
                                console.log(this.carNum)
                                if (this.carNum>0){
                                    this.deleteCarNum = res.shoppingCartList.length
                                }else {this.carNum==0}

                                this.carMsg = res.shoppingCartList
                                this.$store.commit("addCarNum", {isAddCar: true,carNum:this.deleteCarNum,buyCarMsg:this.carMsg})
                            })
                        }
                        console.log(res)
                    }
                )
            }
        },
        created() {
            this.indeterminate = this.checkedList.length !== 0 && this.checkedList.length < this.buyCarMsg.length;
            this.$store.dispatch("getUserInfo")
            this.$store.dispatch("getBuyCarInfo")
            // console.log(buyCarMsg[0].userId)
            // buyCarMsg.forEach(index=>{
            //     console.log(index)
            //     this.price = buyCarMsg[index].course.discountPrice
            // })
            // this.price = buyCarMsg
        },
        computed:{
            ...mapState({
                carNum:'carNum',
                buyCarMsg:'buyCarMsg',
                checkAll(){
                    return this.checkedList.length === this.buyCarMsg.length && this.buyCarMsg.length!==0;
                },
            }),
            totalPrice(){
                const totalList=this.checkedList.map(item=>{
                    if (item.course.isDiscount) {
                        return item.course.discountPrice
                    }else{
                        return item.course.coursePrice
                    }
                })
                // console.log(totalList.length==0)
                return totalList.length==0?0:totalList.reduce((sum,item)=>{
                    return sum + item
                })
            }
        }
    }
</script>

<style scoped lang="less">
.box1{
    margin: 0 30px;
    padding:20px;
    header{
        font-size: 16px;
        line-height: 18px;
        padding: 20px 0;
        font-weight: 400;
        span:nth-of-type(2){
            color: #999;
            font-size: 12px;
        }

    }
    .list-header{
        border: 1px solid #e8e8e8;
        height: 50px;
        line-height: 50px;
        background: #fafafa;
        /*display: flex;*/
        /*justify-content: space-around;*/
    }
    .buycar_content{
        border: 1px solid #e8e8e8;
        margin: 20px 0;
        padding: 10px 0;
    }
    .buycar_put{
        background-color: #eee;
        border: 1px solid #e4e4e4;
        border-right: 0;
        height: 60px;
        margin: 20px 0;
        div:nth-of-type(1){
            float: left;
            padding: 20px 10px;
        }
        div:nth-of-type(2){
            float: right;
            div{
                float: left;
                padding: 0 10px;
                line-height: 60px;
            }
            button{
                cursor: default;
                background: #999;
                font-size: 20px;
                text-align: center;
                line-height: 60px;
                color: #fff;
                width: 120px;
                border: none;
                margin-top: -1px;
            }
        }
    }
    .timefree{
        background-color: rgb(255, 85, 0);
        margin: 0px;
        padding: 3px 5px;
        font-size: 12px;
        color: white;
    }
}
</style>